<route lang="yaml">
meta:
  layout: layout_login
</route>

<template>
  <div class="container">
    <div class="denglu">
      <p>LOGIN</p>
    </div>

    <div id="loginPage">
      <form @submit.prevent="login" id="loginRegisterForm">

        <input type="email" id="user_email" placeholder="Email" v-model="email" required>
        <input type="password" id="password" placeholder="Password" v-model="password" required>

        <button type="submit" id="loginBtn">登录</button>
        <br>
        <button type="button" id="registerBtn" @click="goToRegister">注册</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const email = ref('');
const password = ref('');

const login = async () => {
  try {
    const response = await fetch( 'http://89987om5be14.vicp.fun:44672/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        Email: email.value,
        Password: password.value
      })
    });

    if (response.ok) {
      const data = await response.json();
      localStorage.setItem('userEmail', email.value); // 存储用户邮箱到 localStorage
      localStorage.setItem('userRole', data.user_role); // 存储用户身份到 userRole
      window.location.href = data.redirect_url;
    } else if (response.status === 401) {
      alert("账号不存在，请注册");
    } else if (response.status === 406) {
      alert("密码错误");
    } else {
      alert("登录失败");
    }
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error.message);
    // 处理错误情况，例如显示错误提示给用户
  }
};

const goToRegister = () => {
  window.location.href = 'register ';
};
</script>


<style scoped>
  .container {
    background-image: url(@/assets/login/bg3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Arial;
    text-align: center;
    height: 100%;
    width: 100%;
  }

  .denglu {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
  }

  .denglu p {
    font-size: 8em;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.3);
    background-image: url(@/assets/login/water.png);
    letter-spacing: 8px;
    -webkit-background-clip: text;
    font-weight: 800;
    animation: wave 30s linear infinite;
  }

  @keyframes wave {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 1000px 0;
    }
  }


  #loginPage {
  background-color: #00000000;
  text-align: center;
  width: 380px;
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  position: relative; /* 添加相对定位 */
  top: 58%; /* 上移一半高度 */
  transform: translateY(-50%); /* 使用transform垂直居中 */
}


  input[type="email"],
  input[type="password"],
  button {
    font-size: 20px;
    color: #1ebac5;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #00000080;
    border: 1px solid #00000080;
    border-radius: 20px;
    box-sizing: border-box;
  }

  button {
    color: #1ebac5;
    font-size: 16px;
  }

  button:hover {
    background-color: #fb752dd2;
    cursor: pointer;
  }
  </style>
